<template>
	<view class="viplist">
		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
			<view v-if="loadingState != 'first_loading' &&list.length == 0" class="empty_part flex_column_start_center">
				<!-- <image :src="imgUrl + 'empty_goods.png'" /> -->
				<text>'还没有数据哦'～</text>
			</view>
			<template v-if="list.length > 0" >
				<view v-for="(item, index) in list" :key="index"
					class="log-item flex_row_between_center b_b">
					<view class="left flex_column_start_start">
						<text class="count_num">{{item.rechargeSn}}</text>
						<text class="time">{{$changeTime(item.createTime)}}</text>
					</view>
					<view class="right flex_row_end_center">
						<text >-</text>
						<text >{{$getPartNumber(item.payAmount,'int')}}</text>
						<text >{{$getPartNumber(item.payAmount,'decimal')}}</text>
					</view>
				</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[],
				current:1,
				loadingState:'first_loading',
			}
		},
		onLoad(){
			this.loadData();
		},
		methods:{
			loadData(){
				if (this.loadingState !== 'first_loading') {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (this.loadingState === 'loading') {
					//防止重复加载
					return;
				}
				
				if (this.loadingState == 'no_more_data') {
					//已经没有数据，无需再请求
					return;
				}
				let param = {};
				param.url = 'v3/member/front/levelRecharge/list';
				param.data = {};
				param.data.pageSize = 20;
				param.data.current = this.current;
				this.$request(param).then(res => {
					console.log(res); 
					if(res.state==200){
						this.list=res.data.list
						let hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (hasMore) {
							this.current++;
							this.loadingState = 'allow_loading_more';
						} else {
							this.loadingState = 'no_more_data';
						}
					}else{
						this.$modal.msg(res.msg);
					}
					
				})
			},
		}
	}
</script>

<style>
	page{
		
	}
</style>
<style lang="scss" scoped>
	.list-scroll-content {
		height: calc(100vh - 42px);
	}
	.empty_part {
		margin-top: 208rpx;
	
		text {
			color: #959595;
			font-size: 26rpx;
			margin-top: 57rpx;
		}
	}
	
	.log-item{
		background-color: #fff;
		padding: 22rpx 32rpx;
		border-bottom: 2rpx solid #eee;
	}
	
	.left{
		
	}
	.count_num{
		margin-bottom: 20rpx;
		font-size: 30rpx;
	}
	.right{
		font-size: 30rpx;
	}
	
</style>